<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container1">
        <button>一</button>
        <button>二</button>
        <button>三</button>
        <div>
            第一个
        </div>
        <div style="display: none;">
            第二个
        </div>
        <div style="display: none;">
            第三个
        </div>
    </div>
    <button class="next">下一张</button>
    <div class="container2">
        <button>一</button>
        <button>二</button>
        <button>三</button>
        <div>
            第一个
        </div>
        <div style="display: none;">
            第二个
        </div>
        <div style="display: none;">
            第三个
        </div>
    </div>
    <script>
        // 需求3：第一个选项卡实现下一张功能


        function tab(btns, divs, nextBtn) {
            btns.forEach((btn, key) => {
                btn.onclick = function () {
                    switchDiv(key);
                }
            })

            // 这个函数会根据key的值 来对应key的div显示 ，其他的会隐藏
            function switchDiv(key) {
                divs.forEach((div, k) => {
                    // 如果 点击的按钮的key 和 当前div 的k相同 那么 就让相同k的div显示 ，其他的隐藏掉
                    if (key === k) {
                        div.style.display = "block";
                    } else {
                        div.style.display = "none";
                    }
                })
            }
            if (nextBtn) {
                let num = 0;
                nextBtn.onclick = function () {
                    num++;
                    num = num > 2 ? 0 : num;
                    switchDiv(num);
                }
            }


        }
        let nextBtn = document.querySelector(".next");
        // 第一个选项卡  
        let btns = document.querySelectorAll(".container1 button");
        let divs = document.querySelectorAll(".container1 div");
        tab(btns, divs, nextBtn);
        // 第二个选项卡
        let btns2 = document.querySelectorAll(".container2 button");
        let divs2 = document.querySelectorAll(".container2 div");
        tab(btns2, divs2);





    </script>
</body>

</html>